<template>
  <el-aside :width="isCollapsed ? '68px' : '260px'" class="sidebar">
    <!-- 标题 + 折叠按钮 -->
    <div class="top-container">
      <span v-show="!isCollapsed" class="title">AI Example</span>
      <div class="collapse-button" @click="toggleCollapse">
        <el-tooltip content="收起边栏">
          <el-icon v-show="!isCollapsed" :size="24">
            <Fold/>
          </el-icon>
        </el-tooltip>
        <el-tooltip content="打开边栏">
          <el-icon v-show="isCollapsed" :size="24">
            <Expand/>
          </el-icon>
        </el-tooltip>
      </div>
    </div>

    <!-- 开启新对话按钮 -->
    <el-tooltip content="开启新对话" :disabled="!isCollapsed">
      <el-button type="primary" class="new-chat-button" @click="startNewChat" color="#4d6bfe">
        <el-icon>
          <ChatSquare/>
        </el-icon>
        <span v-if="!isCollapsed">开启新对话</span>
      </el-button>
    </el-tooltip>

    <!-- 对话列表 -->
    <div class="chat-list" v-show="!isCollapsed">
      <div v-for="(group, index) in chatGroups" :key="index" class="chat-group">
        <div class="group-title title-sticky">{{ group.date }}</div>
        <el-menu
            class="sidebar-menu-container"
            @select="handleSelect"
        >
          <el-menu-item
              v-for="(chat, idx) in group.chats"
              :key="idx"
              @click="selectChat(chat)"
              :class="['sidebar-menu-item', {'active': chat.isActive && !!currentChatItem.isActive}]"
          >
            <span>{{ chat.title }}</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>

    <!-- 个人信息 -->
    <div class="user-info" v-show="!isCollapsed">
      <el-avatar :size="40" src="https://avatars.githubusercontent.com/u/1?v=4"/>
      <span v-if="!isCollapsed" class="username">用户</span>
    </div>
  </el-aside>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';
import axios from "axios";

const router = useRouter();
const store = useStore();

// 侧边栏折叠状态
const isCollapsed = ref(false);

// 对话列表数据（按日期分组）
const chatGroups = computed(() => store.getters.chatGroups);
// 缓存当前激活的菜单项
let currentChatItem = ref({});

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

// 开启新对话
const startNewChat = () => {
  currentChatItem.value = {};
  router.push('/new-chat');
};

// 处理菜单项选中事件
const handleSelect = (index) => {
  const chat = chatGroups.value
      .flatMap((group) => group.chats)
      .find((chat) => chat.id.toString() === index);
  selectChat(chat);
};

// 选择对话
const selectChat = (chat) => {
  store.dispatch('selectChat', chat);
  currentChatItem.value = chat;

  router.push(`/chat/${chat.id}`);
};

onMounted(() => {
  axios.get('/api/chatGroups').then(res => {
    store.commit('getChatList', res.data.data);
  })
});
</script>

<style lang="less" scoped>
// 块hover背景色
@block-background-color: rgb(51 51 51);

.sidebar {
  background-color: var(--color-sidebar-background);
  color: var(--color-text-color-balck);
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: width 0.3s;

  .top-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px 20px 20px;
    height: 90px;
    color: var(--color-sub-title-color);

    .title {
      font-size: 26px;
      font-weight: 600;
    }

    .collapse-button {
      line-height: 12px;
      text-align: center;
      cursor: pointer;
    }
  }

  .new-chat-button {
    margin: 0 10px 34px 14px;
    width: 50%;
    height: 44px;
    border-radius: 13px;
    font-size: 16px;

    &:hover {
      background-color: #4166d5;
    }
  }

  .chat-list {
    flex: 1;
    overflow-y: auto;

    .chat-group {
      margin-bottom: 8px;

      .group-title {
        padding: 6px 16px;
        font-size: 13px;
        color: rgb(85, 85, 85);
        font-weight: 600;
        z-index: 1;
      }

      .title-sticky {
        position: sticky;
        top: 0;
        background-color: var(--color-sidebar-background);
      }

      .sidebar-menu-container {
        background-color: var(--color-sidebar-menu-background);
        border: none;

        .sidebar-menu-item {
          color: var(--color-text-color-balck);
          height: 38px;
          border-radius: 10px;
          padding: 0 10px;
          margin: 0 10px;
          font-size: 14px;

          span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &:hover {
            background-color: @block-background-color;
          }
        }

        .active {
          background-color: rgb(73 73 73) !important;
        }
      }
    }
  }

  .user-info {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;

    &:hover {
      background-color: @block-background-color;
    }

    .username {
      font-size: 14px;
      color: rgb(186 186 193);
    }
  }
}
</style>
